<template>
  <div id = "background">
    <!--logo标签-->
    <div id = "logo">MySystem</div>
    <!--登录标签-->
    <div id = "login">
      <el-card class="box-card">
        <div id="form">
          <el-input v-model="username" placeholder="请输入内容"></el-input>
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
          <el-button type="primary" round>登录</el-button>
        </div>
      </el-card>
    </div>
    <!-- 时钟标签  -->
    <div id="clock">
      <div id = "time">{{time}}</div>
      <div id = "date">{{date}}</div>
    </div>
    <div id = "copyright">Copyright @ 2022 CZBANK孙学腾. All right Reserved.</div>
  </div>

</template>

<style scoped>
#background{
  /*设置背景*/
  position: fixed;
  height: 100%;
  width: 100%;
  top:0;
  left: 0 ;
  /*设置渐变的背景*/
  background-image: linear-gradient(
  90deg,
  cyan,
  purple
  );
  /*背景尺寸*/
  background-size: 400%;
  /*动画十秒走完并循环*/
  animation: myanimation 10s infinite;
}
/*关键帧*/
@keyframes myanimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}
#logo{
  color: aliceblue;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 15%;
  left: 15%;
}

#login{
  position:absolute;
  top: 30%;
  left: 38%;
}
/*改变el-card的透明度与大小*/
.el-card {
  width: 373px;
  height: 210px;
  background-color: rgba(255,255,255,0.4);
  /*使框的角变得圆滑*/
  border-radius: 15px;
}

/*让登录框变得稀疏*/
#form{
  line-height: 60px;
  padding-left: 15px;
  padding-right: 15px;;
}

/*时间展示框格式修改*/
#clock{
  color: aliceblue;
  position: absolute;
  top: 70%;
  left:15%;
  text-align: left;
}
/*时间日期字体大小修改*/
#time{
  font-size: 55px;
}
/*修改版权信息样式*/
#copyright{
  color: aliceblue;
  position: absolute;
  top:95%;
  left: 30%;

}

</style>

<script>
export default {
  data(){
    return{
      username:"",
      password:"",
      time:"",
      date:"",
    }
  },
  mounted() {
    this.$nextTick(()=>{
      setInterval(this.update_clock,1000);
    })
  },
  methods:{
    update_clock:function () {
      var d = new Date();
      var year = d.getFullYear();
      if (year < 10) {
        year = "0" + year;
      }
      var mon = d.getMonth() + 1;
      if (mon < 10) {
        mon = "0" + mon;
      }
      var day = d.getDate();
      if (day < 10 ) {
        day = "0" + day;
      }

      var hour = d.getHours();
      if (hour < 10) {
        hour = "0" + hour;
      }
      var minute = d.getMinutes();
      if (minute < 10) {
        minute = "0" + minute;
      }
      this.time = hour + ":" + minute;
      this.date = year + "/" + mon + "/" + day;
    }
  }
}
</script>

